<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.姓名案例_计算属性简写</title>
    <!--  引入Vue  -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
    计算属性简写： 只有读取不需要修改（set函数）时才可以使用简写
  -->

    <div id="root">
        姓:<input type="text" v-model="firstName"> <br/>
        名:<input type="text" v-model="lastName"> <br/>
        姓名: <span>{{fullName}}</span>
    </div>
</body>

<script type="text/javascript">
    const vm = new Vue({
        el: '#root',
        // data中存放属性
        data: {
            firstName: '呆',
            lastName: '大王'
        },
        computed: {
            //完整写法
/*            fullName: {
                get() {
                    console.log("get被调用了")
                    return this.firstName + '-' + this.lastName;
                },
                set(value) {
                    const arr = value.split('-')
                    this.firstName = arr[0]
                    this.lastName = arr[1]
                }
            }*/

            //简写
            fullName() {
                console.log("get被调用了")
                return this.firstName + '-' + this.lastName;
            }
        }
    })
</script>
</html>